<template>
  <div>
    <!-- 在使用v-bind的时候,直接赋值一个对象,则v-bind会把对象的键值对依次拿出来,设置给当前的模板作为属性 ,相当于:name="老王"，:age="18"-->
    <MyHeader v-bind="person" />
    <br />
    <h2>这个cocunt每次加2</h2>
    <Mycount :num="2" />
    <hr />
    <h2>这个count每次加3</h2>
    <Mycount :num="3" />
    <hr />
    <Update :person="person" :count="0" />
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import Mycount from "./components/MyCount";
import Update from "./components/Update";
export default {
  name: "App",
  data() {
    return {
      person: {
        name: "laowang",
        age: 18,
        sex: "男",
      },
    };
  },
  components: {
    MyHeader,
    Mycount,
    Update,
  },
  methods: {
    getRef() {
      //  如果把ref属性写在一个组件上,那么$refs对象上保存的是组件实例
      console.log(this.$refs.HeaderComp, "我是组件上的ref");
    },
  },
};
</script>

<style scoped>
</style>